<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no" />
    <title>Logi&Cadi's Page</title>
    <meta keywords="LogiCadi HomePage 主页">
    <style>
        html,
        body {
            margin: auto;
            text-align: center;
            color: #333;
        }

        body::before {
            content: '';
            position: fixed;
            z-index: -1;
            background: url(./images/bpic4834.jpg) top center/cover no-repeat;
            top: 0;
            height: 1000px;
            left: 0;
            width: 100%;
        }

        a {
            color: #666;
            text-decoration: none;
        }

        .head {
            padding-top: 50px;
        }

        .head h1 {
            margin: 50px;
            opacity: 0;
            -webkit-transition: 2s;
            transition: 2s;
        }

        .head p {
            font-size: 16px;
            opacity: 0;
            -webkit-transition: 2s;
            transition: 2s;
        }

        .example {
            margin: 50px auto;
            opacity: 0;
            -webkit-transition: 3s;
            transition: 3s;
        }

        .example p {
            font-weight: 700;
        }

        .example .case {
            width: 50vw;
            max-width: 300px;
            margin: 20px auto;
            border-radius: 5px;
            overflow: hidden;
        }

        .example img {
            width: 100%;
            vertical-align: top;
        }

        .footer {
            font-size: 14px;
            color: #666;
            padding-bottom: 20px;
            color: rgba(255, 255, 255, 0.582);
        }
    </style>
</head>

<body>

    <div class="container">
        <div class="cantain-box">
            <div class="head">
                <h1>
                    <span>欢</span>
                    <span>迎</span>
                    <span>您</span>
                    <span>的</span>
                    <span>到</span>
                    <span>来</span>
                </h1>
                <p>Hi~我是LogiCadi</p>
                <p>Never say Never!</p>

            </div>
            <div class="example">
                <p>Practice Works</p>
                <div class="case">
                    <a href="https://logicadi.gitee.io/web/case_4_cartAnimate/">
                        <img src="images/20180626114256.png" alt="">
                    </a>
                </div>
                <div class="case">
                    <a href="https://logicadi.gitee.io/web/case_3_tanchishe/">
                        <img src="images/20180617000803.png" alt="">
                    </a>
                </div>
                <div class="case">
                    <a href="https://logicadi.gitee.io/web/case_2_xuanxifu/">
                        <img src="images/20180616120150.png" alt="">
                    </a>
                </div>
                <div class="case">
                    <a href="https://logicadi.gitee.io/web/case_1_lunbotu/">
                        <img src="images/20180616000655.jpg" alt="">
                    </a>
                </div>
            </div>
            <div class="footer">2018-06-15 edit by <a href="https://logicadi.gitee.io/web/resume/">罗凯</a></div>
        </div>
        <!-- <canvas height="50%" width="100%" style="position: fixed; top: 0px; left: 0px; z-index: -1; opacity: 1;"
            id="canvas"></canvas>
    <script src="js/canvas.js"></script> -->
    </div>


    <script>
        window.onload = function () {

            var h1s = document.getElementsByClassName("head")[0].getElementsByTagName("h1");
            var ps = document.getElementsByClassName("head")[0].getElementsByTagName("p");
            var example = document.querySelector(".example");

            example.style.opacity = "1";
            setTimeout(function () {
                for (var i = 0; i < h1s.length; i++) {
                    h1s[i].style.opacity = "1";
                    h1s[i].style.transform = "translate(0,-10px)";
                }
            }, 300);

            setTimeout(function () {
                for (var i = 0; i < ps.length; i++) {
                    ps[i].style.opacity = "1";
                    ps[i].style.transform = "translate(0,-10px)";
                }
            }, 900);
        };
    </script>
</body>

</html>